<template>
  <div class="uc_container">
    <view class="head"></view>
    <view class="user">
      <view class="up">
        <view class="left">
          <view class="user-head-qd">
            <image src="http://aczxsj.ctmon.com.cn/pc/images/a15.png"></image>
            <text>{{ userinfo.verify_text }}</text>
          </view>
        </view>
        <view class="right">
          <image src="http://aczxsj.ctmon.com.cn/PC/acimg/sz.png" @click="toSettings"></image>
        </view>
      </view>
      <view class="down">
        <view class="down_num">
          <image
            src="https://www.bvsipc.com/storage/images/20240831/5e2a6eb7a0e9ce0bda66f22e95f91313.jpg"
            style="border-radius: 50%;width: 80px;height: 80px;border: 3px solid white;"
          ></image>
        </view>
        <view>
          <text class="user_name">{{ userinfo.username }}</text>
        </view>
      </view>
    </view>

    <view class="detail">
      <van-row>
        <van-col
          span="8"
          @click="to_order(0)"
        >
          <view>{{ orderInfo.wait }}</view>
          <view>待上门</view>
        </van-col>
        <van-col
          span="8"
          custom-class="middle_rl_border"
          @click="to_order(1)"

        >
          <view>{{ orderInfo.running }}</view>
          <view>运行中</view>
        </van-col>
        <van-col
          span="8"
          @click="to_order(4)"
        >
          <view>{{ orderInfo.finished }}</view>
          <view>问题单</view>
        </van-col>
      </van-row>

    </view>

    <!-- 订单类型列表 -->
    <view class="order_type_list">
      <van-row>
        <van-col span="6">
          <view class="order_type_item on" @click="to_order(0)">
            <van-icon name="todo-list-o" size="30px"></van-icon>
            <view class="item_label">
              <text>全部订单</text>
            </view>
          </view>
        </van-col>
        <van-col span="6">
          <view class="order_type_item" @click="to_order(0)">
            <van-icon name="hotel-o" size="30px" :info="orderInfo.wait" v-if="orderInfo.wait"></van-icon>
            <van-icon name="hotel-o" size="30px" v-if="!orderInfo.wait"></van-icon>
            <view class="item_label">
              <text>待上门</text>
            </view>
          </view>
        </van-col>
        <van-col span="6">
          <view class="order_type_item" @click="to_order(1)">
            <van-icon name="logistics" size="30px" :info="orderInfo.wait" v-if="orderInfo.wait"></van-icon>
            <van-icon name="logistics" size="30px" v-if="!orderInfo.wait"></van-icon>
            <view class="item_label">
              <text>待运输</text>
            </view>

          </view>
        </van-col>
        <van-col span="6">
          <view class="order_type_item" @click="to_order(3)">
            <van-icon name="refund-o" size="30px" :info="orderInfo.wait" v-if="orderInfo.wait"></van-icon>
            <van-icon name="refund-o" size="30px" v-if="!orderInfo.wait"></van-icon>
            <view class="item_label">
              <text>问题单</text>
            </view>
          </view>
        </van-col>
      </van-row>
    </view>

    <!-- 积分列表 -->
    <view class="score_type_list" @click="to_score">
      <van-row>
        <van-col span="6">
          <view class="score_type_item on">
            <van-icon name="points" size="30px"></van-icon>
            <view class="item_label">
              <text>全部积分</text>
            </view>
          </view>
        </van-col>
        <van-col span="6">
          <view class="score_type_item">
            <view class="item_label_score">
              <text>{{ scoreInfo.wait }}</text>
            </view>
            <view class="item_label">
              <text>审核中</text>
            </view>
          </view>
        </van-col>
        <van-col span="6">
          <view class="score_type_item">
            <view class="item_label_score">
              <text>{{ scoreInfo.ok }}</text>
            </view>
            <view class="item_label">
              <text>审核通过</text>
            </view>

          </view>
        </van-col>
        <van-col span="6">
          <view class="score_type_item">
            <view class="item_label_score">
              <text>{{ scoreInfo.reject }}</text>
            </view>
            <view class="item_label">
              <text>审核不通过</text>
            </view>
          </view>
        </van-col>
      </van-row>
    </view>

    <!-- 菜单列表 四宫格 -->
    <view class="menu_list">
      <van-row>

        <van-col span="12" @click="to_authentication">
          <view class="menu_item">
            <view class="menu_item_pic">
              <van-icon name="manager-o" size="30px"/>
            </view>
            <view class="menu_item_label">认证信息</view>
          </view>
        </van-col>
        <van-col span="12" @click="to_orderAddress">
          <view class="menu_item">
            <view class="menu_item_pic">

              <van-icon name="orders-o" size="30px"/>
            </view>
            <view class="menu_item_label">接单地址</view>
          </view>
        </van-col>
        <van-col span="12" @click="to_car">
          <view class="menu_item">
            <view class="menu_item_pic">

              <van-icon name="logistics" size="30px"/>
            </view>
            <view class="menu_item_label">车辆管理</view>
          </view>
        </van-col>
        <van-col span="12" @click="to_area">
          <view class="menu_item">
            <view class="menu_item_pic">
              <van-icon name="apps-o" size="30px"></van-icon>
            </view>
            <view class="menu_item_label">区域查看</view>
          </view>
        </van-col>
      </van-row>
    </view>


    <view class="safeBottom"></view>
    <van-dialog id="van-dialog"/>

  </div>
</template>

<script>
import {getOrder, getScore, getUserInfo} from "../../../requests/merchant";
import Fly from 'flyio/dist/npm/wx';
import Dialog from "../../../../static/vant/dialog/dialog";

let fly = new Fly();


let $this;

export default {
  name: "uc_container",
  components: {},
  data() {
    return {
      userinfo: {},
      orderInfo: {
        wait: '',
        running: '',
        finished: ''
      },
      scoreInfo: {
        wait: '',
        ok: '',
        reject: ''
      },
      led_status: true,
      verifyStatus: ["未认证", "审核中", "已认证", "认证失败"]
    }
  },
  // 方法集合
  methods: {
    to_order(status) {
      //status:  0--待上门  1--带运输  2--已完成
      mpvue.navigateTo({
        url: "/pages/merchant/orderlist/main?order_status=" + status,
      });
    },
    to_edit() {
      mpvue.navigateTo({
        url: "/pages/user/edit/main",
      });
    },
    to_coupons() {
      mpvue.navigateTo({
        url: "/pages/coupons/main",
      });
    },
    to_car() {
      mpvue.navigateTo({
        url: "/pages/merchant/car/main",
      });
    },
    to_score() {
      mpvue.navigateTo({
        url: "/pages/merchant/score/main",
      });
    },
    to_orderAddress() {
      mpvue.navigateTo({
        url: "/pages/merchant/orderAddress/main",
      });
    },
    to_authentication(status = 1) {
      let url = "/pages/merchant/authentication/main?status=" + status;
      if ($this.userinfo.userAuthorization) {
        url = url + "&auth_id=" + $this.userinfo.userAuthorization.id;
      }
      mpvue.navigateTo({url});
    },
    to_area() {
      mpvue.navigateTo({
        url: "/pages/merchant/area/main",
      });
    },
    toSettings() {
      mpvue.navigateTo({
        url: "/pages/merchant/settings/main",
      });
    },
  },
  created() {
    $this = this;

  },
  onLoad() {
    // reload_userinfo($this);
  },
  onShow() {
    let token = mpvue.getStorageSync('token')
    if (!token) {
      mpvue.redirectTo({
        url: "/pages/merchant/login/main",
      });
    } else {
      // 理应有一个接口查询商家信息
      getUserInfo().then((res) => {
        $this.userinfo = res.data
        $this.userinfo.verify = 0;
        // 判断未绑定用户实名信息则弹窗显示
        if (!$this.userinfo.userAuthorization) {
          Dialog.alert({
            message: '请进行实名信息认证!',
          }).then(() => {
            $this.to_authentication(0)
          });
        } else {
          $this.userinfo.verify_text = $this.verifyStatus[$this.userinfo.userAuthorization.status];
        }

      });
      // 通过接口 第一层获取商家信息
      // 第二层 又可以验证token是否有效
      getOrder().then(res => {
        let $data = res.data;
        $this.orderInfo.wait = $data.ready
        $this.orderInfo.running = $data.transport
        $this.orderInfo.finished = $data.question
      })
      getScore().then(res => {
        let $data = res.data
        $this.scoreInfo.wait = $data.ready
        $this.scoreInfo.ok = $data.ok
        $this.scoreInfo.reject = $data.reject
      })
    }
  }
}
</script>

<style>
.contact_button .van-button {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0.1;
  width: 100%;
  height: 100%;
}

.middle_rl_border {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
</style>
<style scoped>
@import "index.css";
@import "extend_index.css";
</style>
